import React, { useEffect, useRef } from 'react'
import './style.css'
import axios from 'axios'
interface PropsType {
    children?: JSX.Element,
    beforeUpload?: Function,
    action: string
    uploadResult: Function
}

const Index: React.FC<PropsType> = ({ children, beforeUpload, action, uploadResult }) => {
    // 通过 ref 获取节点
    const input = useRef<HTMLInputElement | null>(null)

    // 区域点击事件
    const handleClick = () => {
        // 获取input节点
        const inputEl = input.current;
        // 排除 null 可能性 
        if (!inputEl) return;
        // 触发 input 点击事件
        inputEl.click()
    }
    // input 内容改变事件
    const handleChange = () => {
        // 获取input节点
        const inputEl = input.current;
        // 排除 null 可能性 
        if (!inputEl) return;
        if (!inputEl.files) return;
        // 获取上传文件的信息
        const file = inputEl.files[0]
        // 获取校验的结果
        const flag = beforeUpload ?  beforeUpload(file) : true
        // 通过上传
        flag && handleUpload(file)
    }

    // 拖拽在目标松手事件
    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
        // 阻止浏览器默认行为： 默认打开拖拽的文件
        e.preventDefault()
        // 获取文件信息
        const file = e.dataTransfer.files[0];
          // 获取校验的结果
          const flag = beforeUpload ?  beforeUpload(file) : true
          // 通过上传
          flag && handleUpload(file)

    }

    // 上传函数
    const handleUpload = async (file: File) => {
        // 准备上传 新建一个formData
        const formData = new FormData();
        formData.append('chunk', file, file.name)
        // 上传
        const resp = await axios.post(action, formData);
        uploadResult(resp.data)
    }


    useEffect(() => {
        document.addEventListener("dragover", e => {
            // 阻止浏览器默认行为： 默认不触发 drop 事件
            e.preventDefault()
        })
    }, [])

    return (
        <div className='upload' onClick={() => handleClick()} onDrop={(e) => handleDrop(e)}>
            <input type="file" style={{ display: 'none' }} ref={input} onChange={() => handleChange()} />
            {children}
        </div>
    )
}

export default Index